// 上传身份证

import close from '@/assets/close.png';
import back from '@/assets/id_back.png';
import front from '@/assets/id_front.png';
import { useGetToken } from '@/utils/request';
import type { GetProp, UploadProps } from 'antd';
import { Button, Col, Image, Modal, Row, Upload, message } from 'antd';
import { useEffect, useState } from 'react';
import { useIntl } from 'umi';

const { Dragger } = Upload;
type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

type Props = {
  visible: boolean;
  handleCancel: () => void;
  value: {
    front: string;
    back: string;
  };
  onChange: (value: Record<string, any>) => void;
  disabled?: boolean;
};
const IdCardModal: React.FC<Props> = ({
  visible,
  handleCancel,
  value = { front: '', back: '' },
  onChange,
  disabled = false,
}) => {
  const intl = useIntl();

  const [val, setVal] = useState({ front: '', back: '' });
  const { front: frontImg, back: backImg } = val;
  const { token, urlAction } = useGetToken();
  useEffect(() => {
    if (visible) {
      setVal(value);
    }
  }, [value, visible]);
  // 限制
  const beforeUpload = (file: FileType) => {
    const isLt20M = file.size / 1024 / 1024 < 20;
    if (!isLt20M) {
      message.error(intl.formatMessage({ id: 'home.img_max' }));
    }
    return isLt20M || Upload.LIST_IGNORE;
  };
  const list = [
    {
      img: front,
      imgValue: frontImg,
      key: 'front',
      label: 'home.id_front',
    },
    {
      img: back,
      imgValue: backImg,
      key: 'back',
      label: 'home.id_back',
    },
  ];
  return (
    <Modal footer={false} width={660} closeIcon={null} open={visible} destroyOnClose>
      <div style={{ fontWeight: 'bold', fontSize: 23 }}>
        {intl.formatMessage({ id: 'home.id' })}
      </div>
      <Row gutter={[24, 0]}>
        {list.map((item) => {
          const { key, imgValue, img, label } = item;
          return (
            <Col span={12} key={key}>
              <div style={{ margin: '24px 0 10px 0' }}>{intl.formatMessage({ id: label })}</div>

              <div
                style={{
                  width: '100%',
                  background: '#F5F6F8',
                  borderRadius: 10,
                  textAlign: 'center',
                }}
              >
                {imgValue ? (
                  <>
                    <Image height={233} src={imgValue} />
                    {!disabled && (
                      <img
                        src={close}
                        onClick={() => {
                          setVal({
                            ...val,
                            [key]: '',
                          });
                        }}
                        style={{
                          position: 'absolute',
                          width: 20,
                          zIndex: 999,
                          right: 15,
                          cursor: 'pointer',
                        }}
                      />
                    )}
                  </>
                ) : (
                  <Dragger
                    accept=".jpg,.png"
                    disabled={disabled}
                    maxCount={10}
                    action={urlAction}
                    headers={{ Authorization: `Bearer ${token}` }}
                    onChange={(info) => {
                      const { response, status } = info.file;
                      if (status == 'done') {
                        if (response?.code == '100200') {
                          setVal({
                            ...val,
                            [key]: response.data,
                          });
                        } else {
                          message.error({
                            key: 'update',
                            content: response?.message || 'error',
                          });
                        }
                      }
                    }}
                    beforeUpload={beforeUpload}
                    showUploadList={false}
                    style={{ padding: '24px 0' }}
                  >
                    <img src={img} width={185} style={{ marginBottom: 10 }} />
                    <div>{intl.formatMessage({ id: 'home.dorp' })}</div>
                  </Dragger>
                )}
              </div>
            </Col>
          );
        })}
      </Row>
      <div style={{ color: '#999', margin: '10px 0 48px' }}>
        {intl.formatMessage({ id: 'home.max' })}
      </div>
      <Row gutter={[24, 0]} justify="center">
        <Col span={12}>
          <Button onClick={handleCancel} className="cancel_btn">
            {intl.formatMessage({ id: 'home.cancel' })}
          </Button>
        </Col>
        {!disabled && (
          <Col
            span={12}
            onClick={() => {
              handleCancel();
              onChange({
                idCard: val,
              });
            }}
          >
            <Button style={{ width: '100%', height: '60px' }} type="primary">
              {intl.formatMessage({ id: 'home.sure' })}
            </Button>
          </Col>
        )}
      </Row>
    </Modal>
  );
};

export default IdCardModal;
